<template>
	<div>
		<el-form-item :label="$t('designer.setting.colSpanTitle')" v-if="!thisOptionModel.responsive">
			<el-input-number v-model.number="thisOptionModel.span" :min="1" :max="24"
							 style="width: 100%"></el-input-number>
		</el-form-item>
		<el-form-item :label="$t('designer.setting.colSpanTitle') + '(PC)'"
					  v-if="!!thisOptionModel.responsive && (formConfig.layoutType === 'PC')">
			<el-input-number v-model.number="thisOptionModel.md" :min="1" :max="24"
							 style="width: 100%"></el-input-number>
		</el-form-item>
		<el-form-item :label="$t('designer.setting.colSpanTitle') + '(Pad)'"
					  v-if="!!thisOptionModel.responsive && (formConfig.layoutType === 'Pad')">
			<el-input-number v-model.number="thisOptionModel.sm" :min="1" :max="24"
							 style="width: 100%"></el-input-number>
		</el-form-item>
		<el-form-item :label="$t('designer.setting.colSpanTitle') + '(H5)'"
					  v-if="!!thisOptionModel.responsive && (formConfig.layoutType === 'H5')">
			<el-input-number v-model.number="thisOptionModel.xs" :min="1" :max="24"
							 style="width: 100%"></el-input-number>
		</el-form-item>
	</div>
</template>

<script>

export default {
	name: "grid-col-span-editor",
	mixins: [],
	props: {
		designer: Object,
		selectedWidget: Object,
		optionModel: Object,
	},
	computed: {
		formConfig() {
			return this.designer.formConfig
		},
	},
	data() {
		return {
			thisOptionModel: this.optionModel
		}
	},
	watch: {
		'optionModel': {
			handler(val) {
				if (val) {
					this.thisOptionModel = val
				}
			}
		},
	},
}
</script>

<style scoped>

</style>
